/**
 * Created by Adi(adi@imeth.cn) on 2016/11/2.
 */
"use strict";

import React from 'react';
import {
	View,
	Image,
	Text,
	TextInput,
	TouchableOpacity,
	StyleSheet,
} from 'react-native';

import Math from '../module/Math';

class Login extends React.Component {

	render() {
		return (
			<View style={styles.page}>
				<View style={[styles.top, styles.logoView]}>
					<View style={styles.pageTitleView}>
						<Text style={styles.pageTitle}>登录</Text>
					</View>
					<Image style={styles.logo} resizeMode="stretch" source={require('../img/ic_logo.png')}/>
				</View>

				<View style={[styles.bottom]}>
					<View style={[styles.content,]}>
						<View style={[styles.contentItem]}/>

						<View style={styles.contentItem}>
							<Input style={styles.flex} icon={require('../img/ic_login_number.png')} keyboardType="numeric" placeholder="请输入手机号码"/>
						</View>
						<View style={[styles.contentItem]}>
							<Input style={styles.flex} icon={require('../img/ic_login_number.png')} keyboardType="default" placeholder="请输入密码" secureTextEntry/>
						</View>
						<View style={[styles.contentItem, {paddingTop: 8}]}>
							<Text>记住密码</Text>
							<View style={styles.flex}/>
							<Text>忘记密码?</Text>
						</View>

					</View>

					<View style={styles.contentButtonView}>
						<Button
							style={styles.contentButtonLogin}
							titleStyle={{
								color: '#fff',
							}}
							title="登录"
							onPress={_=> {
								//Math.add(1,1).then(result => alert(result));
								Math.multiply(2, 2, result => alert(result));
							}}/>
					</View>
					<View style={styles.flex}/>
					<View style={styles.contentButtonView}>
						<Button
							style={styles.contentButtonRegister}
							titleStyle={{
								color: '#999',
							}}
							title="免费注册"
							onPress={_=>alert(2)}/>
					</View>
				</View>
			</View>
		);

	}

}

class Button extends React.Component {

	static propTypes = {
		title: React.PropTypes.string,
		onPress: React.PropTypes.func,
		titleStyle: React.PropTypes.any,
	};

	render() {
		let {title, onPress, titleStyle, style} = this.props;
		return (
			<TouchableOpacity style={[styles.button, style]} onPress={onPress}>
				<Text style={[styles.buttonText, titleStyle,]}>{title}</Text>
			</TouchableOpacity>
		);
	}
}

class Input extends React.Component {

	static propTypes = {
		icon: React.PropTypes.number,
		keyboardType: React.PropTypes.string,
		placeholder: React.PropTypes.string,
		secureTextEntry: React.PropTypes.bool,
	};

	static defaultProps = {
		secureTextEntry: false,
	};

	constructor(props) {
		super(props);
		this.state = {
			value: '',
		};
	}

	getValue() {
		return this.state.value;
	}

	render() {
		let {icon, keyboardType, placeholder, secureTextEntry} = this.props;
		return (
			<View style={styles.inputView}>
				<Image style={[styles.inputIcon]} source={icon} resizeMode="stretch"/>
				<TextInput
					style={[styles.inputInput]}
					keyboardType={keyboardType}
					onChangeText={value => this.setState({value})}
					placeholder={placeholder}
					secureTextEntry={secureTextEntry}
					value={this.state.value}
				/>
			</View>
		);
	}
}

const styles = StyleSheet.create({

	flex: {
		flex: 1
	},

	page: {
		flex: 1,
		backgroundColor: '#fff',
		paddingTop: 24,
		paddingHorizontal: 17,
		paddingBottom: 17,
	},
	pageTitleView: {
		justifyContent: 'center',
		alignItems: 'center',
	},

	pageTitle: {},

	top: {
		flex: 4,
	},

	bottom: {
		flex: 11,
	},

	logoView: {
		justifyContent: 'center',
		alignItems: 'center',
	},

	logo: {
		width: 150,
		height: 90,
	},

	content: {
		height: 200,
	},

	contentItem: {
		flex: 1,
		flexDirection: 'row',
	},

	contentButtonView: {},

	contentButtonLogin: {
		flex: 1,
		backgroundColor: '#38b7ea',
		height: 38,
		flexDirection: 'row',
		borderRadius: 5,
	},

	contentButtonRegister: {
		borderWidth: 1,
		borderColor: '#999',
		flex: 1,
		height: 38,
		flexDirection: 'row',
		borderRadius: 5,
	},

	inputView: {
		flex: 1,
		borderBottomWidth: 1,
		borderBottomColor: '#f2f2f2',
		flexDirection: 'row',
	},

	inputIcon: {
		width: 12,
		height: 17,
		alignSelf: 'center',
	},

	inputInput: {
		flex: 1,
		height: 20,
		marginLeft: 10,
		alignSelf: 'center',
	},

	button: {
		justifyContent: 'center',
		alignItems: 'center',
	},

	buttonText: {
		alignSelf: 'center',
	},

});

export default Login;